{% extends 'base.html' %}

{% from 'macros.html' import static_file %}

{% block title %}{{ user.username }}'s Watchlist Pro{% endblock %}

{% block styles %}
    {{ super() }}
    {{ static_file('css', 'css/bootstrap.min.css') }}
{% endblock styles %}

{% block scripts %}
    {{ static_file('js', 'https://code.jquery.com/jquery-3.4.1.min.js', local=False) }}
    {{ static_file('js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', local=False) }}
    {{ static_file('js', 'js/bootstrap.min.js') }}
{% endblock scripts %}

{% block content %}
<h2>
    <img src="{{ url_for('static', filename='photo.jpg') }}" width="50"> {{ user.username }}
</h2>
{% if user.bio %}
<i>{{ user.bio }}</i>
{% else %}
<i>This user has not provided a bio.</i>
{% endif %}
{# Below is the movie list (this is comment) #}
<h5>{{ user.username }}'s Watchlist ({{ movies|length }}):</h5>
<ul>
    {% for movie in movies %}
        <li>{{ movie.name }} - {{ movie.year }}</li>
    {% endfor %}
</ul>

{% endblock content %}